<template>
  <div class="comprehensive-test-page">
    <h2>就诊人管理功能全面测试</h2>
    
    <div class="test-section">
      <h3>1. 选择器功能测试</h3>
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="testForm.relationship"
            name="relationship"
            label="关系"
            placeholder="请选择与本人关系"
            readonly
            is-link
            @click="showRelationshipPicker = true"
          />
          <van-field
            v-model="testForm.idCardType"
            name="idCardType"
            label="证件类型"
            placeholder="请选择证件类型"
            readonly
            is-link
            @click="showIdCardTypePicker = true"
          />
        </van-cell-group>
      </van-form>
      
      <div class="test-result">
        <p><strong>关系:</strong> {{ testForm.relationship || '未选择' }}</p>
        <p><strong>证件类型:</strong> {{ testForm.idCardType || '未选择' }}</p>
      </div>
    </div>

    <div class="test-section">
      <h3>2. API响应码测试</h3>
      <van-button @click="testAllApis" :loading="testingApis" block>
        {{ testingApis ? '测试中...' : '测试所有API响应码' }}
      </van-button>
      <div v-if="apiTestResult" class="result">
        <p><strong>状态:</strong> {{ apiTestResult.status }}</p>
        <p><strong>消息:</strong> {{ apiTestResult.message }}</p>
        <pre v-if="apiTestResult.data">{{ JSON.stringify(apiTestResult.data, null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h3>3. 删除功能测试</h3>
      <van-field
        v-model="deleteTestId"
        label="就诊人ID"
        placeholder="请输入要删除的就诊人ID"
        type="number"
      />
      <van-button @click="testDelete" :loading="testingDelete" block>
        {{ testingDelete ? '删除中...' : '测试删除功能' }}
      </van-button>
      <div v-if="deleteResult" class="result">
        <p><strong>状态:</strong> {{ deleteResult.status }}</p>
        <p><strong>消息:</strong> {{ deleteResult.message }}</p>
        <pre v-if="deleteResult.data">{{ JSON.stringify(deleteResult.data, null, 2) }}</pre>
      </div>
    </div>

    <!-- 关系选择器 -->
    <van-popup v-model:show="showRelationshipPicker" position="bottom">
      <van-picker
        :columns="relationshipOptions"
        @confirm="onRelationshipConfirm"
        @cancel="showRelationshipPicker = false"
      />
    </van-popup>

    <!-- 证件类型选择器 -->
    <van-popup v-model:show="showIdCardTypePicker" position="bottom">
      <van-picker
        :columns="idCardTypeOptions"
        @confirm="onIdCardTypeConfirm"
        @cancel="showIdCardTypePicker = false"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Toast } from 'vant'
import { api } from '@/api'

const testingApis = ref(false)
const testingDelete = ref(false)
const showRelationshipPicker = ref(false)
const showIdCardTypePicker = ref(false)
const deleteTestId = ref(1)

const apiTestResult = ref<any>(null)
const deleteResult = ref<any>(null)

const testForm = reactive({
  relationship: '',
  idCardType: ''
})

// 选项数据
const relationshipOptions = [
  '本人',
  '父母', 
  '配偶',
  '子女',
  '其他'
]

const idCardTypeOptions = [
  '身份证',
  '护照',
  '军官证',
  '其他'
]

// 选择器事件处理
const onRelationshipConfirm = ({ selectedValues }: any) => {
  testForm.relationship = selectedValues[0]
  showRelationshipPicker.value = false
  Toast(`已选择关系: ${selectedValues[0]}`)
}

const onIdCardTypeConfirm = ({ selectedValues }: any) => {
  testForm.idCardType = selectedValues[0]
  showIdCardTypePicker.value = false
  Toast(`已选择证件类型: ${selectedValues[0]}`)
}

// 测试所有API响应码
const testAllApis = async () => {
  testingApis.value = true
  apiTestResult.value = null
  
  try {
    // 测试读接口
    const readResponse = await api.getPatients()
    
    // 测试写接口（添加）
    const addData = {
      relationship: '本人',
      name: 'API测试用户',
      idCardType: '身份证',
      idCardNum: '123456789012345678',
      medicalCard: '20250101001',
      phone: '13800138000',
      address: 'API测试地址',
      isDefault: false
    }
    
    const addResponse = await api.addPatient(addData)
    
    apiTestResult.value = {
      status: '成功',
      message: '所有API响应码测试通过',
      data: {
        readApi: readResponse,
        addApi: addResponse
      }
    }
    Toast('API响应码测试成功')
  } catch (error) {
    console.error('API测试失败:', error)
    apiTestResult.value = {
      status: '失败',
      message: error instanceof Error ? error.message : '未知错误',
      data: null
    }
    Toast('API测试失败')
  } finally {
    testingApis.value = false
  }
}

// 测试删除功能
const testDelete = async () => {
  if (!deleteTestId.value) {
    Toast('请输入就诊人ID')
    return
  }
  
  testingDelete.value = true
  deleteResult.value = null
  
  try {
    const response = await api.deletePatient(deleteTestId.value)
    deleteResult.value = {
      status: '成功',
      message: '删除功能测试成功',
      data: response
    }
    Toast('删除功能测试成功')
  } catch (error) {
    console.error('删除测试失败:', error)
    deleteResult.value = {
      status: '失败',
      message: error instanceof Error ? error.message : '未知错误',
      data: null
    }
    Toast('删除功能测试失败')
  } finally {
    testingDelete.value = false
  }
}
</script>

<style scoped>
.comprehensive-test-page {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.test-section h3 {
  margin-top: 0;
  color: #1989fa;
}

.test-result {
  margin-top: 15px;
  padding: 15px;
  background: #f7f8fa;
  border-radius: 4px;
}

.test-result p {
  margin: 5px 0;
  font-size: 14px;
}

.result {
  margin-top: 15px;
  padding: 15px;
  background: #f7f8fa;
  border-radius: 4px;
}

.result pre {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
}
</style>

